<template>
  <view class="certification-recruitment">
    <!-- 返回按钮和标题 -->
    <view class="header">
      <tn-button 
        backgroundColor="tn-bg-left" 
        style="color: black; position: absolute; left: 5%; top: 10%; width: 35px; height: 35px; font-size: 25px;" 
        :border="false"
        @click="handleReturn"
      >
        <text class="tn-icon-left"></text>
      </tn-button>
      <view class="page-title">认证招商</view>
    </view>

    <!-- 认证招商内容区 -->
    <view class="content-container">
      <view class="section">
        <view class="section-title">认证招商简介</view>
        <view class="section-content">
          欢迎加入AMSP认证招商计划！我们提供全面的认证服务，帮助您的企业提升品牌信誉和市场竞争力。通过我们的认证，您的企业将获得更多的商业机会和客户信任。
        </view>
      </view>

      <view class="section">
        <view class="section-title">认证流程</view>
        <view class="section-content">
          1. 提交认证申请<br>
          2. 审核企业资料<br>
          3. 现场审核（如有必要）<br>
          4. 颁发认证证书<br>
          5. 认证有效期为一年，每年需进行年审
        </view>
      </view>

      <view class="section">
        <view class="section-title">所需资料</view>
        <view class="section-content">
          - 企业营业执照复印件<br>
          - 法人身份证复印件<br>
          - 企业简介<br>
          - 近三年财务报表<br>
          - 其他相关资质证明
        </view>
      </view>

      <tn-button 
        backgroundColor="tn-bg-primary" 
        class="apply-button"
        @click="submitApplication"
      >
        提交认证申请
      </tn-button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    // 返回上一页
    handleReturn() {
      uni.navigateBack({ delta: 1 });
    },
    // 提交认证申请
    submitApplication() {
      uni.showModal({
        title: '确认提交',
        content: '您确定要提交认证申请吗？',
        showCancel: true,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '申请已提交',
              icon: 'success',
              duration: 1500
            });
            setTimeout(() => {
              uni.navigateBack({ delta: 1 });
            }, 1500);
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.certification-recruitment {
  padding: 20px;
  background-color: #f5f5f5; /* 轻微灰色背景 */
  height: 100%;
}

.header {
  position: relative;
  margin-bottom: 20px;
}

.page-title {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin-top: 10%; /* 控制标题与顶部的距离 */
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}

.content-container {
  background-color: white; /* 内容区的背景色 */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  margin-top: 30px;
}

.section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}

.section-content {
  font-size: 16px;
  color: #555;
  line-height: 1.5;
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}

.apply-button {
  width: 100%;
  height: 50px;
  margin-top: 30px;
  font-size: 18px;
  border-radius: 8px;
  text-align: center;
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}
</style>